<template>
  <div class="songList">
    <div class="btns">
      <a class="play" title="播放" @click.prevent="sentSongUrl(songList)">
        <i class="ply"></i>
        <span>播放</span>
      </a>
      <a class="add" @click.prevent="addList(songList)"></a>
      <a class="dis">
        <span>收藏热门50</span>
      </a>
    </div>
    <table class="m-table">
      <tbody>
      <tr v-for="(item,index) in songList" :key="index">
        <td class="filst" style="width: 13%;">
          <div class="hd">
            <span class="num-hd">{{index+1}}</span>
            <span class="bg-img" @click="sendUrl(item)"></span>
          </div>
        </td>
        <td class="rank" style="width: 44%;">
          <div class="f-cb f-thlde">
            <router-link :to="{name:'SongDetail',params:{id:item.id}}" class="f-thlde">
              {{item.name}}
            </router-link>
            <span class="mv" title="播放mv" v-if="item.mv" @click="toMv(item.mv)">
                  MV
                </span>
          </div>

        </td>
        <td class="s-fc3"  style="width: 13%;">
          <span class="u-dur">{{voiceDuration(item.dt)}}</span>
          <div class="oper">
            <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(item)"></a>
            <span class=" s-bg-11" title="收藏">收藏</span>
            <span class=" u-icn-81" title="分享">分享</span>
            <span class=" s-bg-12" title="下载">下载</span>
          </div>
        </td>
        <td class="singer"  style="width: 20%;">
      <span class="text" v-if="item.al">
        <router-link :to="{name:'AlbumDetail',params: {id:item.al.id}}">{{item.al.name}}</router-link>
      </span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {voiceDuration} from "@/utils/voiceDuration";
export default {
  name: "index",
  data(){
    return {
      voiceDuration:voiceDuration,
      songList:[]
    }
  },
  methods:{
    toMv(id){
      this.$router.push({name:'MvDetail',query:{id:id}})
    },
    addList(i){
      this.$store.commit('track/addMusic',i)
    },
    addSongList(i){
      this.$store.commit('track/ADDMUSICLIST',i)
    },
    sendUrl(i){
      this.$store.commit('track/SETMUSIC',i)
    },
    sentSongUrl(i){
      this.$store.commit('track/SETMUSIC',i[0])
      this.$store.commit('track/addMusic',i)
    },
    async getSingerSongs() {
      let result = await this.$API.reqSingerTopSongs(this.$route.params.id)
      this.songList = result.data.songs
    },
  },
  mounted() {
    this.getSingerSongs()
  }
}
</script>

<style scoped lang="less">
.songList {
  width: 640px;
  padding-top: 25px;

  min-height: 150px;
  margin: 0 auto 40px auto;
  .btns {
    margin-bottom: 10px;
    height: 31px;
    display: flex;
    .play {
      width: 66px;
      padding-left: 5px;
      background: url("../../../assets/button2.png") no-repeat 0 -1652px;
      text-align: center;
      line-height: 31px;
      height: 31px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      i {
        width: 20px;
        height: 18px;
        margin: 6px 2px 2px 0;
        float: left;
        background: url("../../../assets/button2.png") no-repeat 0 -1622px;
      }

      span {
        color: #fff;
      }
      &:hover {
        cursor: pointer;
      }
    }
    .add {
      width: 31px;
      height: 31px;
      margin-right: 5px;
      background: url("../../../assets/button2.png") no-repeat 0 -1588px;
      &:hover {
        cursor: pointer;
        background-position: -40px -1588px;
      }
      &:active {
        background-position: -80px -1588px;
      }
    }
    .dis {
      // width: 92.6px;
      // padding-right: 5px;
      margin-right: 6px;
      height: 100%;
      font-family: simsun,\5b8b\4f53;
      background: url("../../../assets/button2.png") no-repeat;
      background-position: 0px -1063px;
      span {
        padding-right: 10px;
        display: inline-block;
        height: 100%;
        //width: 100%;
        background: url("../../../assets/button2.png") no-repeat right -1106px;
        line-height: 30px;
        padding-left: 30px;
        color: #666;
        padding-right: 5px;
      }
      &:hover {
        color: #666;
        cursor: pointer;
      }
    }
  }

  .tlt {
    width: 640px;
    height: 35px;
    margin: 0 auto;
    border-bottom: 2px solid #c20c0c;

    .out-list {
      width: 100px;
      height: 16px;
      float: right;
      display: flex;
      margin-right: 20px;
      align-items: center;
      margin-top: 10px;

      .u-icn {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url("../../../assets/icon.png");
        background-position: -34px -863px;
      }

      a {
        color: #4996d1;
        text-decoration: underline;
      }
    }

    h3 {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      color: #333;
      float: left;
    }

    .sub {
      margin: 9px 0 0 20px;
      float: left;
      color: #666;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      -webkit-text-size-adjust: none;
    }

    .more {
      margin-top: 9px;
      height: 16px;
      float: right;

      .fc {
        color: #c20c0c;
        font-weight: bold;
      }
    }
  }

  .m-table {
    width: 640px;

    margin: 0 auto;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;

    tr {
      width: 100%;
      vertical-align: inherit;
      font-weight: bold;
      text-align: -internal-center;

      th {
        text-align: left;
        height: 38px;
        background-color: #f7f7f7;
        background-position: 0 0;
        background-repeat: repeat-x;
        border-right: 1px solid #DEDEDE;

        div {
          height: 18px;
          line-height: 18px;
          padding: 8px 10px;
          color: #666;
          font-weight: normal;
          background-position: 0 -56px;
        }
      }
    }

    tbody {
      tr:nth-child(odd) {
        background-color: #F7F7F7;
      }

      tr {
        height: 30px;


        &:hover .oper {
          display: block !important;
        }

        &:hover .u-dur {
          display: none;
        }

        td {
          height: 30px;
        }

        .filst {
          .hd {
            height: 18px;


            .num-hd {
              color: #666;
              width: 25px;
              height: 18px;
              display: inline-block;
              font-weight: normal;
              float: left;
              line-height: 18px;
              margin-left: 15px;
              margin-right: 10px;
            }

            .bg-img {
              float: left;
              display: inline-block;
              width: 17px;
              height: 17px;
              background: url("../../../assets/table.png") no-repeat 0 -103px;
              &:hover{
                background-position: -0px -128px;
                cursor: pointer;
              }
            }
          }
        }

        .rank {
          padding-top: 10px;
          padding-bottom: 10px;

          .f-cb {
            max-width: 98%;
            display: flex;
            align-content: center;
            .mv{
              width: 23px;
              height: 17px;
              margin-left: 5px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background-image: url("../../../assets/table.png");
              background-position: 0 -151px;

            }

            a {
              color: #666;
              font-weight: normal;
            }

            .texe {
              margin-left: 10px;
              display: flex;
              align-items: center;
              justify-content: center;

              .icon-img {
                display: inline-block;
                width: 17px;
                height: 17px;
                background: url("../../../assets/table.png") no-repeat -20px -128px;
              }

              .txt {
                a {
                  color: #333;
                  font-weight: normal;
                }
              }
            }

            a {
              margin-left: 10px;

              .img-data {
                width: 50px;
                height: 50px;
              }
            }

          }
        }

        .s-fc3 {
          .oper {
            display: none;
            float: left;

            a {
              width: 13px;
              height: 13px;
              float: left;
              margin-top: 2px;
              display: inline-block;

              background: url("../../../assets/icon.png") no-repeat 0 -700px;
              &:hover{
                background-position: -22px -700px;
              }
            }

            .s-bg-11 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../../assets/table.png") no-repeat 0 -174px;
              &:hover{
                background-position: -20px -174px;
              }
            }

            .u-icn-81 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../../assets/table.png") no-repeat 0 -195px;
              &:hover{
                background-position: -20px -195px;
              }
            }

            .s-bg-12 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../../assets/table.png") no-repeat -81px -174px;
              &:hover{
                background-position: -104px -174px;
              }
            }
          }

          .u-dur {
            color: #666;
            margin-left: 5px;
            font-weight: normal;
          }
        }

        .singer {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .text {
            a {
              color: #666;
              margin-left: 5px;
              font-weight: normal;
            }
          }

          .album {

            margin-left: 5px;

            a {
              color: #666;
              font-weight: normal;

            }
          }
        }
      }
    }
  }
}
</style>